﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/knockout-1.2.1.js" type="text/javascript"></script>
    <script src="js/dishdash.widgetconfiguration.js" type="text/javascript"></script>
    <script src="js/flotr2.min.js" type="text/javascript"></script>
    <script src="services/EventCategoryService.js" type="text/javascript"></script>
    <script src="widgets/dishdash.widget.eventcount.line.js" type="text/javascript"></script> 
    <script src="widgets/dishdash.widget.eventcount.pie.js" type="text/javascript"></script>
</head>
<body onload="displayWidgets();">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand" href="#">Dish Dash</a>
                <ul class="nav">
                    <li class="active"><a href="#">Dashboard</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="span8">
        <button class="btn btn-primary" style="vertical-align: top" onclick="addWidget();">
            Add New Widget</button>  <button class="btn btn-primary" style="vertical-align: top" onclick="dishdash.widgetconfiguration.clearStorage();">
                        Clear Local Storage</button>
        <table style="width: 100%;">
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
            </tr>
            <tr>
                    <label class="control-label">
                        Please select a Widget</label>
                    <select id="ddlWidgets" name="D1" onchange="showGraph();">
                        <option></option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="WidgetData" class="container" style="visibility: hidden">
                        <fieldset>
                            <div class="control-group">
                                <label class="control-label">
                                    Displaying Widget</label>
                                <div class="controls">
                                    <input id="WidgetName" type="text" class="input-xlarge" readonly="readonly" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">
                                </label>
                            </div>
                        </fieldset>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="renderGraph">
                    <!--<div id="Some System Performance" style="width: 400px; height: 400px;">
                    </div>-->
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <button class="btn btn-primary" style="vertical-align: top" onclick="editWidget();">
                        Edit Widget</button>
                       
                </td>
            </tr>
        </table>
    </div>
    
    <script type="text/javascript">

        displayWidgets = function () {
            var widgets = dishdash.widgetconfiguration.getAllWidgets();

            if (widgets == null) {
                alert("No widgets configured!");
                return;
            }

            //remove all options first
            document.getElementById("ddlWidgets").options.length = 0;

            $.each(widgets, function (keyname, objwidget) {
                var anOption = document.createElement("OPTION")
                ddlWidgets.add(anOption);
                anOption.innerText = objwidget["widgetName"];
                anOption.Value = objwidget;
            });

            showGraph();
        };


        showGraph = function () {
            var graphDivName = "renderGraph";
            var widget = dishdash.widgetconfiguration.getAWidget(ddlWidgets.value);
            //Dynamically Add Div to plot this graph
            addDiv(ddlWidgets.value);

            //Get the widget name from the drop down list
            document.getElementById("WidgetName").value = widget.widgetName;

            //Show the a Text box with name for the widget selected
            var WidgetDataDiv = document.getElementById("WidgetData");
            WidgetDataDiv.style.visibility = "visible";


            if (widget.WidgetType == dishdash.widgetconfiguration.WidgetTypeEnum.LineGraph) {
                var graph = new dishdash.graphs.timeGraph(ddlWidgets.value, widget);
            } else if (widget.WidgetType == dishdash.widgetconfiguration.WidgetTypeEnum.AggrEventCount) {
                var graph = new dishdash.graphs.eventCountWidget(ddlWidgets.value, widget);
            } else if (widget.WidgetType == dishdash.widgetconfiguration.WidgetTypeEnum.EventDist) {
                //TODO Amend graph for EventDist
                var graph = new dishdash.graphs.timeGraph(ddlWidgets.value, widget);
            } else {
                alert("No valid widget type found.");
            }



            graph.start();
        };

        addWidget = function () {
            window.open("CreateEditWidget.htm", "Add Widget");
        };

        editWidget = function () {
            window.open("CreateEditWidget.htm?WidgetName=" + WidgetName.value, "Edit Widget");
        };


        addDiv = function (widgetName) {

            var newdiv = document.createElement('div');
            newdiv.id = ddlWidgets.value;
            newdiv.setAttribute("id", widgetName);
            newdiv.setAttribute("style", 'width: 400px; height: 400px;');
            //newdiv.innerHTML = "Graphing " + widgetName;
            
            //Remove the divs for the previous graphs if there are any
            var cell = document.getElementById("renderGraph");

            if (cell.hasChildNodes()) {
                while (cell.childNodes.length >= 1) {
                    cell.removeChild(cell.firstChild);
                }
            }

            //Add the new div for the current graph
            document.getElementById('renderGraph').appendChild(newdiv);
        }

        popUpClosed = function () {
            window.location.reload();
        }

       
    </script>
</body>
</html>
